/**
 * 第 2/3 讲
 * ----------------
 * 绑定属性注意：
 *    class 要换成 className
 *    for   要换成 htmlFor
 *    style 是对象
 *    
 */
import React from 'react'
// import '../assets/css/home.css'

export default class Home2 extends React.Component {
  constructor() {
    super()
    this.state = {
      msg: '我是一个home组件',
      title: '我是一个title',
      color: 'red',
      style: {
        color: 'red',
        fontSize: '40px',
      }
    }
  }

  render() {
    return (
      <div>
        <h2>{this.state.msg}</h2>
        <div title='111'>我是一个div</div>
        <br />
        <div title={this.state.title}>我是一个 div </div>
        <div className='red'>我是一个红色的div</div>
        <div className={this.state.color}>我是一个红色的div 11</div>
        <br />
        <label htmlFor="name">姓名</label>
        <input id='name'></input>
        <br />

        {/* 行内样式 */}
        <div style={{color: 'red'}}>我是一个红色的 行内样式</div>
        <div style={this.state.style}>我是一个红色的div 行内样式</div>

      </div>
    )
  }
}